<template>
	<view class="ym-address">
		<view @tap="open" :style="{color: Unselected}">
			{{checkAddress.length>1?checkAddress[0].name+'-'+checkAddress[1].name+'-'+checkAddress[2].name:'省、市、区'}}
		</view>
		<view class="delete-icon" @click="deletecheckAddress" v-if="showdelete"></view>

		<ympup ref="popup" type="bottom" background-color="#fff" :mask-click="false" border-radius="10px 10px 0 0">
			<view class="YmBgColor">
				<view class="header">
					<view class="ym-title">请选择所在地区</view>
					<view class="YmClose" :style="{color:props.closeColor}" @tap="close">完成</view>
				</view>
				<view class="YmCheckAddres">
					<view class="YmNull" v-if="checkAddress.length<1">
						请选择
					</view>
					<view class="" v-else>
						<text>{{checkAddress[0].name||'未选择'}} </text> -
						<text> {{checkAddress.length>1?checkAddress[1].name:'未选择'}} </text> -
						<text> {{checkAddress.length>2?checkAddress[2].name:'未选择'}}</text>
					</view>
				</view>
				<view class="ymSwiper">
					<swiper class="swiper" :current="current" @change="change" :indicator-dots="false" :autoplay="false"
						:interval="500" :duration="500">
						<swiper-item class="swiperitem">
							<scroll-view class="bgscroll" :scroll-y="true">
								<view class="swiper-item">
									<view class="Ym-item" v-for="(ym,index) in address" :key="index" :style="{
										color:(checkAddress.length>0?checkAddress[0].code:'')==ym.areaCode?selctColor:''
									}" @tap="checkType(ym,'firset')">
										{{ym.areaName}}
									</view>
								</view>
							</scroll-view>
						</swiper-item>
						<swiper-item class="swiperitem">
							<scroll-view class="bgscroll" :scroll-y="true">
								<view class="swiper-item">
									<view class="Ym-item" v-for="(ym,index) in tweAddress" :key="index" :style="{
										color:(checkAddress.length>1?checkAddress[1].code:'')==ym.areaCode?selctColor:''
									}" @tap="checkType(ym,'twe')">
										{{ym.areaName}}
									</view>
								</view>
							</scroll-view>
						</swiper-item>
						<swiper-item class="swiperitem">
							<scroll-view class="bgscroll" :scroll-y="true">
								<view class="swiper-item">
									<view class="Ym-item" v-for="(ym,index) in lastAddress" :key="index" :style="{
									color:(checkAddress.length>2?checkAddress[2].code:'')==ym.areaCode?selctColor:''
								}" @tap="checkType(ym,'three')">
										{{ym.areaName}}
									</view>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</ympup>
	</view>
</template>

<script setup>
	import ympup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	import CityRows from '@/common/address.js'
	const emit = defineEmits(['Address',"deleteAddress"]);
	import {
		computed,
		ref,
		watchEffect
	} from 'vue'
	const props = defineProps({
		closeColor: {
			type: String,
			default: '#007aff'
		},
		selctColor: {
			type: String,
			default: '#007aff'
		},
		Unselected: {
			type: String,
			default: '#999999'
		},
	});
	let address = ref(CityRows.data)
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const show = ref(true)
	const popup = ref(null)
	const current = ref(0)
	let showdelete = ref(false)
	const close = () => {
		popup.value.close()
		emit('Address', checkAddress.value);
	}
	
	
	
	// let showdelete = computed(()=>{
	// 	if(checkAddress[0]){
	// 		return true
	// 		console.log("删除true")
	// 	}else{
	// 	 return	false
	// 	 console.log("删除false")
	// 	}
	// })
	
	const open = () => {
		popup.value.open('bottom')
	}
	const checkAddress = ref([])
	const tweAddress = ref([])
	const lastAddress = ref([])
	
	
	watchEffect(()=>{
		console.log(checkAddress.value,"checkAddress")
		if(checkAddress.value[0]?.name){
		
			showdelete.value=true
			// console.log("删除true")
		}else{
			showdelete.value=false
				
			// console.log("删除false")
		}
	})
	
	
	let deletecheckAddress = ()=>{
		checkAddress.value = []
		tweAddress.value = []
		lastAddress.value = []
		// address.value = CityRows.data
		current.value = 0
		
		// console.log("删除true")
		emit('deleteAddress');
	}
	
	const checkType = (row, type) => {
		if (type == 'firset') {
			checkAddress.value[0] = {
				name: row.areaName || "",
				code: row.areaCode || ""
			}
			checkAddress.value[1] = {
				name: "",
				code: ''
			}
			checkAddress.value[2] = {
				name: "",
				code: ''
			}
			tweAddress.value = row.children
			lastAddress.value = []
			current.value = 1
		} else if (type == 'twe') {
			if (row.children) {
				checkAddress.value[1] = {
					name: row.areaName || "",
					code: row.areaCode || ""
				}
				checkAddress.value[2] = {
					name: "",
					code: ''
				}
				lastAddress.value = row.children
				current.value = 2
				return
			}
			checkAddress.value[1] = {
				name: row.areaName || "",
				code: row.areaCode || ""
			}
		} else {
			checkAddress.value[2] = {
				name: row.areaName || "",
				code: row.areaCode || ""
			}
		}
	}
	const change = (e) => {
		current.value = e.detail.current
	}
	onLoad(() => {})
</script>

<style lang="scss">
	.ym-address {
		position: relative;
		/* 确保元素有定位属性 */
		z-index: 1000;
		/* 设置更高的层级值 */
		width: 100%;

		.delete-icon {
			width: 20px;
			height: 20px;
			background-color: #999999;
			display: inline-block;
			 position: fixed; /* 使用 fixed 定位 */
			border-radius: 50%;
			/* 圆形背景 */
			top: 26%;
			/* 垂直居中 */
			transform: translateY(-50%);
			/* 调整垂直居中 */
			   right: 6%;
				z-index: 10;
		}

		.delete-icon::before,
		.delete-icon::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 14px;
			height: 2px;
			background-color: white;
		}

		.delete-icon::before {
			transform: translate(-50%, -50%) rotate(45deg);
		}

		.delete-icon::after {
			transform: translate(-50%, -50%) rotate(-45deg);
		}

		.YmBgColor {
			padding: 32rpx;
			background-color: white;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ym-title {
					font-weight: bold;
					font-size: 1.2rem;
				}

				.YmClose {}
			}

			.YmCheckAddres {
				font-size: 28rpx;
				margin: 32rpx 0;
				color: gray;

				text {
					color: #000;
					font-weight: bold;
				}

				.YmNull {
					font-size: 28rpx;
					color: red;
				}
			}
		}

		.swiper {
			height: 800rpx;
		}

		.bgscroll {
			height: 100%;
		}

		.swiperitem {
			height: 100%;

			.swiper-item {
				.Ym-item {
					padding: 16rpx 0;
					border-bottom: 2rpx solid #f2f2f2;
				}
			}
		}
	}
</style>